<template>
  <div class="login-section">
    <div class="login-card">
      <div class="login-header">
        <h2>身份验证</h2>
        <p>请输入您的身份证号码查看电子处方</p>
      </div>

      <form @submit.prevent="onSubmit" class="login-form">
        <div class="form-group">
          <label for="idCard" class="form-label">
            <i class="fas fa-id-card"></i>
            身份证号码
          </label>
          <input
            type="text"
            id="idCard"
            v-model="idCardInput"
            class="form-control"
            placeholder="请输入您的身份证号码"
            required
            maxlength="18"
          >
        </div>

        <button type="submit" class="btn-login">
          <i class="fas fa-sign-in-alt"></i>
          查看处方
        </button>
      </form>

      <div class="login-tips">
        <h3><i class="fas fa-info-circle"></i> 温馨提示</h3>
        <ul>
          <li>请输入与就诊时相同的身份证号码</li>
          <li>系统将显示该身份证号码下的所有电子处方记录</li>
          <li>您的个人信息将受到严格保护</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'login'])

const idCardInput = ref(props.modelValue)

watch(() => props.modelValue, (newValue) => {
  idCardInput.value = newValue
})

watch(idCardInput, (newValue) => {
  emit('update:modelValue', newValue)
})

const onSubmit = () => {
  // 简单的身份证格式验证
  const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  if (!idCardRegex.test(idCardInput.value)) {
    alert('请输入有效的身份证号码')
    return
  }
  emit('login', idCardInput.value)
}
</script>

<style scoped>
/* 登录区域 */
.login-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.login-header p {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

.login-form {
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
}

.form-label i {
  margin-right: 10px;
  color: #3498db;
}

.form-control {
  width: 100%;
  padding: 16px 20px;
  font-size: 18px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  transition: all 0.3s;
}

.form-control:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  outline: none;
}

.btn-login {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: 600;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-login:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.login-tips {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
}

.login-tips h3 {
  font-size: 18px;
  color: #2c3e50;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-tips ul {
  margin: 0;
  padding-left: 20px;
}

.login-tips li {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .login-section {
    min-height: 300px;
  }

  .login-card {
    padding: 20px;
  }
}
</style>
